<style>
	body{
		max-width: 600px !important;
		min-width: 600px !important;
		width: 600px;
		overflow: hidden;
	}
	.ncm-container .right-layout{
		width: 800px;
		float: none;
		margin: 0 auto;
	}


	.box{
		overflow: hidden;
		position: relative;
	}

	.ncm-container{
		width: 600px !important;
	}
	.box .list{
		display: block;
		padding-top: 15px;
		/*padding: 15px;*/
		overflow: hidden;
		width: 670px;
		margin: 0 auto;
	}

	.box .list .item{
		border : 1px solid #ddd;
		background: #fff;
		width: 150px;
		box-shadow: 1px 1px 1px #ddd;
		position: relative;
		float: left;
		margin-right: 15px;
		margin-bottom: 10px;

	}
	.box .list .item:hover{
		border-color : #f90;
		transition : border-color 0.8s;
	}

	.box .list p{
		overflow: hidden;
		display: block;
	}

	.box .list .face img{
		width: 120px;
		height: 120px;
		margin: 0 auto;
		display: block;
		cursor: pointer;
		margin-top: 15px;
	}

	.box .list .description{
		display: block;
		padding: 10px;
		padding-top: 5px;
		border-top: 1px solid #ddd;
		height: 30px;
		line-height: 15px;
		overflow: hidden;
	}
	.box .name{
		padding: 10px;
		padding-bottom: 5px;
		display: block;
	}
	.box  .pagination{
		text-align: center;
		clear: both;
		display: block;
	    /*width: 100%;*/
	}
	.box .gold{
		position: absolute;
		top: -25px;
		left: -40px;
		width: 150px;
		cursor: pointer;
	}
	.actionbtn{
		clear: both;
		text-align: center;
		padding-top: 15px;
	}
	._to_apply{
		line-height: 35px;
	    width: 100px;
	    background: rgb(91, 183, 91);
	    text-align: center;
	    color: #fff;
	    font-size: 14px;
	    text-decoration: none;
	    display: inline-block;
	    *display: inline;
	    margin-right: 15px;
	}
	._back{
	    line-height: 35px;
	    width: 100px;
	    background: #DA4F49;
	    text-align: center;
	    color: #fff;
	    font-size: 14px;
	    text-decoration: none;
	    display: inline-block;
	    *display: inline;
	}
	.actionbtn a:hover{
		color: #fff;
		text-decoration: none !important;
	}
	._to_apply:hover{
		background: rgba(91,183,91,.8);
	}
	._back:hover{
		background: #BD362F;
	}

	p.name,p.description{
		text-align: center;
	}
</style>
<div class='box'>
	<?php
		$m = Model();
		$user = Model('member');
		// if(!empty($))
		// $condition = array();
		if(isset($_GET['area']) && !empty($_GET['area'])){
			$list = $m
			->table('member,proxy')->join('left')
			->on('member.member_id = proxy.member_id')
			->group('proxy.member_id')
			->where(array('proxy.member_id' => array('neq' , '-1'),'is_guest' => array('neq',1)))
			->order("find_in_set('$_GET[area]',member_cityid) desc,proxy.time desc")
			->page(8)
			->select();
		}
		else{
			$list = $m->table('proxy')
			->where(array('is_guest' => array('neq',1)))
			->order("time desc")
			->page(8)
			->select();
		}
	?>
	<div style='clear: both;'></div>
	
	<script>
		var member_data = {}
	</script>
	<div class="list">
		<?php
			foreach($list as $key => &$val){
				$user_info = $user->find($val['member_id']);
				if(empty($user_info['avatar'])){
					$face = '/data/upload/shop/common/default_user_portrait.gif';
				}
				else{
					$face = '/data/upload/shop/avatar/' . $user_info['avatar'];
				}
				if($user_info['member_provinceid']){
					$area = Model('area');
					$area_info = $area->where(array("area_id" => array("in",array($user_info['member_provinceid'],$user_info['member_cityid'],$user_info['member_areaid']))))->select();
					$_area = array();
					foreach($area_info as $area){
						$_area[] = $area['area_name'];
					}
					$pinfo = implode(' ',$_area);
				}
				$val['member_area'] = $pinfo;
				$data = array_merge($val,$user_info);
		?>
		<script>
			member_data[<?php echo $val['member_id']?>] = <?php echo json_encode($data) ?>;
		</script>
		<div class='item' member_id='<?php echo $val[member_id];?>'>
			<p class='face'>
				<img src="<?php echo $face;?>" alt="">
			</p>
			<p class="name">
				<?php
					echo $user_info['member_name'];
				?>
			</p>
			<p class='description' style='height:auto;padding-top:10px'>
				<?php
					$area = Model('area');
					if($user_info['member_provinceid']){
						echo $pinfo;
					}
					else{
				?>
				该用户没有填写地区
				<?php
					}
				
				?>
			</p>
			<p class="description">
				<?php
					echo $val['infomation'];
				?>
			</p>
			<?php
				if($val['parent_id'] == 0){
			?>
			<img src="/static/images/2.gif" class='gold' alt="">
			<?php		
				}
			?>
		</div>
		<?php		
			}
		?>
	</div>
	<div class="pagination">
	<?php
		echo $m->showpage();
	?>	
	</div>
	
	<script>

	var proxy_id = -1;
	var proxy_name = '';

	$('.box img').click(function(event) {
		var _this = $(this).closest('.item');
		var position = _this.position();
		var clone = _this.clone();
		$(".box").append(clone);
		clone.find('.name,.description,.gold').remove();
		clone.find('.face').css('float','left');
		clone.css({
			width : 760,
			height : 760,
			left : 0,
			top : 0,
			padding : '20px',
		});
		$('.box .list,.box .pagination').hide();
		var member_id = _this.attr('member_id');
		proxy_id = member_id;
		proxy_name =  member_data[member_id]['member_name'];
		var data = member_data[member_id];
		var info = {
			"member_name" : '用户名',
			"member_mobile" : "联系方式",
			"member_area" : "所在地区",
			"member_email" : "用户邮箱",
			'description' : "代理说明"

		}
		// var info = ['member_name','member_mobile','member_email','description'];
		var b = $('<div>').css({
			float : 'left',
			paddingLeft : "30px"
		});
		for(var i in info){
			if(data[i] == null){
				data[i] = '暂无';
			}
			var dl = $('<dl>').css({
				'margin-bottom' : '20px',
				'width' : '500px'
			});
			var dt = $('<dt>').append(info[i]).css({
				'font-size' : '15px',
				'font-weight' : 'bold',
				'line-height' : "25px"
			});
			var dd = $('<dd>').append(data[i]).css({
				'border-bottom' : '1px solid #ddd',
				'line-height' : "20px",
				'padding-bottom' : '5px',
				'padding-top' : '5px'
			});
			b.append(dl.append(dt).append(dd));
		}
		b.appendTo(clone);

		var action = $('<div>').addClass('actionbtn');
		<?php if($_GET['notsave'] != 1){?>
		var to_apply = $('<a>').attr('href','javascript:;').addClass('_to_apply').append('填写申请单').click(function(){
			$('.item:not(.list .item)').remove();
			$('.applylist').show().find('*:not(.username)').val('');
		}).appendTo(clone);
		<?php }else{ ?>
		var to_apply = $('<a>').attr('href','javascript:;').addClass('_to_apply').append('选择该代理').click(function(){
			// $('.item:not(.list .item)').remove();
			// $('.applylist').show().find('*:not(.username)').val('');
			parent.window['proxy_info'] = {proxy_id : proxy_id,proxy_name:proxy_name};
			parent.jQuery('.layui-layer-close').trigger('click');
		}).appendTo(clone);	
		<?php }?>
		var back = $('<a>').attr('href','javascript:;').addClass('_back').append('返回').appendTo(clone).click(function(){
			$(this).closest('.item').remove();
			$('.box .pagination,.box .list').show();
		});
		action.append(to_apply).append(back).appendTo(clone);
		// clone.append(to_apply).append(back);
		// console.log(position);
	});

	</script>
	
	<style>
		.applylist{
			display: none;
			padding: 40px 100px;
			position: relative;
		}
		.applylist dt{
			font-weight: bold;
			font-size: 15px;
			line-height: 30px;
		}
		.applylist dd{
			padding-bottom: 15px;

		}
		.applylist input{
			width: 350px;
		}
		.applylist textarea{
			height: 280px;
		}
		.applylist .face{
			position: absolute;
			right : 104px;
			top : 40px;
		}	

		input,textarea{
			font-family: 'Mircosoft Yahei' !important;
		}

		.save_apply{
			line-height: 35px;
		    width: 100px;
		    background: rgb(255, 102, 0);
		    text-align: center;
		    color: #fff;
		    font-size: 14px;
		    text-decoration: none;
		    display: inline-block;
		    *display: inline;
		    margin-top: 15px;
		    /*margin-right: 15px;*/
		}
		.save_apply:hover{
			text-decoration: none;
			color: #fff;
			background: rgba(255,102,0,.8);
		}

	</style>
	<div class='applylist'>

		<?php
			$me = $user->find(isset($_SESSION['member_id']) ? $_SESSION['member_id'] : 0);
		?>
		<dl>
			<dt><span style='color:red'>*</span>用户名</dt>
			<dd>
				<input type="text" class="username" readonly="true" value="<?php echo empty($me[member_name])?'注册时该项不用填写~' : $me[member_name]?>" >
				
			</dd>
		</dl>

		<dl>
			<dt>
				<span style='color:red'>*</span>联系方式
			</dt>
			<dd>
				<input type="text" class="contact" placeholder="请输入您的联系方式">
			</dd>
		</dl>

		<dl>
			<dt>
				<span style='color:red'>*</span>留言
			</dt>
			<dd>
				<textarea rows='50' class='msg' cols='95'></textarea>
			</dd>
		</dl>

		<dl>
			<dd style='text-align: center;'>
				<a href="javascript:;" class='save_apply'>提交申请</a>
			</dd>
		</dl>

		<script>
			if(!String.prototype.trim){
				String.prototype.trim = function(){
					return $.trim(this);
				}
			}
			$('.save_apply').click(function(event) {
				var username = $('.username').val().trim();
				var contact = $('.contact').val().trim();
				if(!/^1[34578][0-9]{9}$/.test(contact)){
					layer.tips("联系方式的格式错误",'.contact',{tips:1});
					return;
				}
				var msg = $('.msg').val().trim();
				<?php if($_GET['notsave'] != 1){?>
				var index = layer.load();
				$.post('/shop/index.php?act=member_proxy&op=save_apply',{username:username,contact:contact,msg:msg,proxy_id:proxy_id},function(msg){
					layer.close(index);
					if(msg == 'success'){
						layer.msg('提交成功，请等待该代理商回复',{icon:1},function(){
							parent.layer.closeAll();
						});
					}
					else{
						layer.msg('提交失败，请联系网站管理员！',{icon:2},function(){
							parent.location.reload();
						})
					}
				});
				<?php }else{?>
				var info = {
					username : username,
					contact : contact,
					msg : msg,
					proxy_id : proxy_id,
					proxy_name : proxy_name
				};
				parent.window['proxy_info'] = info;
				parent.jQuery('.layui-layer-close').trigger('click');

				<?php }?>
				/* Act on the event */
			});
		</script>

		<div class="face">
			<?php
				if(empty($me['avatar'])){
					$face = '/data/upload/shop/common/default_user_portrait.gif';
				}
				else{
					$face = '/data/upload/shop/avatar/' . $me['avatar'];
				}
			?>
			<img src="<?php echo $face;?>" width='150' height='150' alt="">
		</div>
	</div>
</div>
